import { useEffect } from 'react'
import {useRoutes,useNavigate,useLocation} from 'react-router-dom'
import router from './router'
import { message } from 'antd'

// 这个组件专门用于跳转到 page1 组件
function ToPage1(){
  const navigateTo = useNavigate()
  // 加载完这个组件后实现跳转
  useEffect(()=>{
    // 加载完当前这个组件之后才会执行这个钩子中的函数
    navigateTo("/page1")
  },[])
  message.warning("您已经登录过了")
  return <div></div>
}

// 这个组件专门用于跳转到 login 组件
function ToLogin(){
  const navigateTo = useNavigate()
  // 加载完这个组件后实现跳转
  useEffect(()=>{
    // 加载完当前这个组件之后才会执行这个钩子中的函数
    navigateTo("/login")
    message.warning("您还未登录")
  },[])
  return <div></div>
}

// 定义全局前置路由守卫组件
function BeforeRouterEnter(){
  //根据路由表生成对应的路由规则
	const element = useRoutes(router)

  /* 
    后台管理系统的两种经典的路由跳转情况
      1. 如果访问的是登录页面，并且有token，那么就跳转到首页
      2. 如果访问的不是登录页，并且没有token，那么跳转到登录页面
  */
  // 获取token
  const token = localStorage.getItem("jvtc-react-management-token")
  // useLocation这个钩子可以获取到当前的路由路径
  const location = useLocation()

  // 1. 如果访问的是登录页面，并且有token，那么就跳转到首页
  if(location.pathname === "/login" && token){
    // 这里不能使用Navigate重定向进行路由跳转，因为这里需要BeforeRouterEnter是一个正常的JSX路由组件
    return <ToPage1/>
  }

  // 2. 如果访问的不是登录页，并且没有token，那么跳转到登录页面
  if(location.pathname !== "/login" && !token){
    // 这里不能使用Navigate重定向进行路由跳转，因为这里需要BeforeRouterEnter是一个正常的JSX路由组件
    return <ToLogin/>
  }
  return element
}

function App() {
  //根据路由表生成对应的路由规则
	// const element = useRoutes(router)
  return (
    <>
      <div>
        {/* 下面这个 Outlet 组件的作用是占位，指定路由组件的展示位置，类似于 vue 中的 router-view */}
        {/* 如果当前项目的router路由的写法是组件形式，那么可以使用Outlet，使用Outlet前需要引入 */}
        {/* <Outlet></Outlet> */}

        {/* 如果当前项目的router的写法是路由表形式，那么可以采用下面这种方式 */}
        {/* 注册路由表规则，指定路由组件的呈现位置 */}
        {/* {element} */}
        <BeforeRouterEnter></BeforeRouterEnter>
      </div>
    </>
  )
}

export default App
